import Taro from '@tarojs/taro'
import { Component } from 'react'
import { Text,Image, View, Button } from '@tarojs/components'
import './index.less'
import Yes from "../../img/yes.png"
import No from "../../img/no.png"
import AddQuestion from './AddQuestion'



function getStore(key){
  let str = Taro.getStorageSync(key)
  if (!str) return []
  return JSON.parse(str)
}

function setStore(key, obj){
  let str;
  if (typeof obj === "object"){
    str = JSON.stringify(obj)
  }
  Taro.setStorageSync(key,str)
}

export default class Index extends Component {

  state = {
    showQuestionModel:false, //默认定义弹出框不显示
    questionList:getStore("question")
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  addQuestion(){
    this.setState({showQuestionModel:true})
  }
  closeQuestion(){
    this.setState({showQuestionModel:false})
  }
  receiveQuestion(options){
    let {questionList} = this.state;
    questionList.push({id:parseInt(Math.random()*10000),...options})
    this.setState({
      questionList
    },()=>{
      //console.log(this.state.questionList)
      setStore("question", questionList)
    })
    this.closeQuestion()
  }
  //点赞的方法
  addVote(item){
    let {questionList} = this.state;
    if (item){
      item.vote = item.vote?item.vote+1:1;
    } 
    let newList = questionList.map(itemQuestion=>{
      if(itemQuestion.id === item.id){
        itemQuestion = {...item}
      }
      return itemQuestion
    })
    this.setState({
      questionList:newList
    },()=>{
      setStore("question", newList)
    })
  }

    //取消点赞的方法
  cutVote(item){
    let {questionList} = this.state;
    if (item){
      item.vote = item.vote? ((item.vote-1)>0?(item.vote-1):0):0;
    } 
    let newList = questionList.map(itemQuestion=>{
      if(itemQuestion.id === item.id){
        itemQuestion = {...item}
      }
      return itemQuestion
    })
    this.setState({
      questionList:newList
    },()=>{
      setStore("question", newList)
    })
  }

  render () {
    let {showQuestionModel, questionList} = this.state;
    let myList = questionList.sort((a,b)=>b.vote-a.vote)
    return (
      <View className='index'>
        <View className='title'>问答模块案例</View>
        <View className='question-list'>
          {
            myList.map((item,index)=>{
              return(
                <View className='question' key={index}>
                  <View className='question-left'>
                    <View className='question-title'>{item.title}</View>
                    <View className='question-des'>{item.des}</View>                  
                  </View>
                  <View className='question-right'>
                    <Image onClick={this.addVote.bind(this,item)} src={Yes} className='img'></Image>
                    <Text>{item.vote?item.vote:0}</Text>
                    <Image onClick={this.cutVote.bind(this,item)} src={No} className='img'></Image>
                  </View>
                </View>
              )
            })
          }
        </View>
        {showQuestionModel ? <AddQuestion receiveQuestion={this.receiveQuestion.bind(this)} closeQuestion={this.closeQuestion.bind(this)} />:null} 
        <View className='index_btn_group'>
          <Button onClick={this.addQuestion.bind(this)} className='btn-question'>提问</Button>
        </View>
      </View>
    )
  }
}
